<template>
  <div>
    <div id="transferTreeView" class="bi-ui-dialog-content" style="padding: 0px 24px 10px 24px">
      <div id="agileTree2TableTransfer"  class="transferComponents" style="height: 100%;">
        <section class="bi-transfer-panel" style="width: 350px">
          <div v-if="isShowIres" class="bi-transfer-panel-header">
            <div class="bi-transfer-panel-header-title selectResourceButton">选择资源</div>
          </div>
          <div v-else  class="bi-el-transfer-header">
            <el-row>
              <el-col :span="20">
                <span class="span_btn" @click="backToIres">信息资源</span>>
                <span>选择指标</span>
              </el-col>
              <el-col :span="4" style="float:right;text-align: right;">
                <span class="span_btn el-icon-back" @click="backToIres">返回</span>
              </el-col>
            </el-row>
          </div>
          <div class="bi-transfer-panel-search">
            <el-input  ref="searchInput" v-model="searchText" class="bi-el-search-realtime bi-el-search-transfer topInput" placeholder="请输入搜索内容" @input="fuzzyMatch" clearable @clear="cleanLeftKeyWord()">
              <i slot="prefix" class="el-icon-search"></i>
            </el-input>
          </div>
          <div class="bi-transfer-panel-body" >
            <div id="search-container" v-if="searchText !== '' && searchResultVisible" class="left-table-div-lite" >
              <vxe-table
                  border
                  resizable
                  height="auto"
                  :auto-resize=true
                  show-overflow="tooltip"
                  :loading="loading"
                  :highlight-hover-row=true
                  :highlight-current-row=true
                  class="bi-vxe-table bi-table-top-border-none"
                  :data.sync="searchResult"
                  @cell-click="setSelected"
                  @cell-dblclick="doubleRowCheck"
                  :cell-class-name="resTableDynamicStyle"
              >
                <vxe-table-column field="code" title="标识" width="auto" align="left"></vxe-table-column>
                <vxe-table-column field="title" title="标题" width="auto" align="left"></vxe-table-column>
                <vxe-table-column field="pathTitle" title="路径" width="auto" align="left"></vxe-table-column>
              </vxe-table>
            </div>
            <div v-show="!(searchText !== '' && searchResultVisible)" class=" bi-transfer-left-tree bi-tree-border-top-none">
              <el-tree
                  v-show="isShowIres"
                  class="bi-el-tree"
                  node-key="id"
                  :props="props"
                  ref="iresTree"
                  :load="loadIresTreeNode"
                  :data="iresTreeData"
                  :default-expanded-keys="defExpendKeys"
                  lazy
                  @node-click="iresTreeNodeClick"
                  v-on:dblclick.native="dblNodeClick"
                  :highlight-current="true"
                  :expand-on-click-node="false"
              >
                <template slot-scope="{ node, data }">
                    <span :id="'treeitem' + data.id" :class="resTreeDynamicStyle( node, data )">
                        <span :class="data.icon + ' bi-ui-iconfont '" style="padding-right:5px"></span>
                        <span :title="data.label" >{{ data.label }}</span>
                    </span>
                </template>
              </el-tree>
              <el-tree
                  v-show="!isShowIres"
                  class="bi-el-tree"
                  node-key="id"
                  :props="props"
                  ref="zbGroupTree"
                  :load="loadZbGroupTreeNode"
                  :data="zbGroupTreeData"
                  lazy
                  @node-click="zbGroupTreeNodeClick"
                  v-on:dblclick.native="dblZbNodeClick"
                  :highlight-current="true"
                  :expand-on-click-node="false"
              >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span :id="'zbtreeitem' + data.id" >
                                <i :class="['bi-ui-iconfont', getIcon(data) ]" style="margin-right:3px;"></i>
                                <span :title="data.label" >{{ data.label }}</span>
                            </span>
                        </span>
              </el-tree>
            </div>
          </div>
        </section>
        <section class="bi-transfer-btns" style="margin: 0px 5px;position: relative">
          <div id="btns" style="position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%);    margin-top: -55px;">
            <el-button @click="doSelect"   size="mini"   class="bi-el-btn bi-el-btn-transfer"  v-show="transferBtn[0]" :disabled="origin === '1' || selectDisable">选择</el-button>
            <el-button @click="selectSub" size="mini"   class="bi-el-btn bi-el-btn-transfer"  v-show="transferBtn[1]" :disabled="origin === '1' || selectSubDisable">直接下级</el-button>
            <el-button @click="selectAllSub" size="mini"   class="bi-el-btn bi-el-btn-transfer"  v-show="transferBtn[2]" :disabled="origin === '1' || selectAllSubDisable">所有下级</el-button>
            <el-button @click="remove"  size="mini"   class="bi-el-btn bi-el-btn-transfer"  v-show="transferBtn[3]" :disabled="origin === '1' || removeDisable">移除</el-button>
            <el-button @click="removeAll"   size="mini"   class="bi-el-btn bi-el-btn-transfer"  v-show="transferBtn[4]" :disabled="origin === '1' || removeAllDisable" >移除所有</el-button>
          </div>
        </section>
        <section class="bi-transfer-panel" style="width: 500px">
          <div class="bi-transfer-panel-header">
            <div class="bi-transfer-panel-header-title" ></div>
          </div>
          <div class="bi-transfer-panel-body-lite">
            <vxe-table
                border
                resizable
                class="bi-vxe-table"
                height="auto"
                show-overflow="tooltip"
                :highlight-hover-row=true
                :highlight-current-row=true
                :data.sync="tableData"
                @cell-click="rowClick"
                @cell-dblclick="rowDblClick">
              <vxe-table-column field="code" title="标识" width="auto" align="left"></vxe-table-column>
              <vxe-table-column field="title" title="标题" width="auto" align="left"></vxe-table-column>
              <vxe-table-column field="path" title="路径" width="auto" align="left"></vxe-table-column>
            </vxe-table>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import {Debounce} from "@/utils/debounce";
import {folderApi, inforesApi} from "@/api/irpApi";
export default {
  name: "DoubleTreeTransfer",
  props: {
    //中间操作按钮
    "transferBtn": { required: false, default: function() { return [ true, true, true, true, true] } },
    // 树形配置项
    "props": { required: false,type:Object,default: ()=>{return { children: "children", label: "title", isLeaf: "isLeaf" ,id:"id" } }},
    "selectedResArr": { required: false,type:Array,default:function() {return []}},
    "currDeptCode": { required: false,type:String,default:""},
    "origin":{required:false,type:String,default:""},
    "isApply":{required:false,type:Boolean,default:false}
  },
  computed:{
    selectDisable:function(){
    // 部门信息不一致  则不显示“选择” 按钮
    if(this.isShowIres){
      return this.currIresNodeData == null || !this.currIresNodeData.isLeaf || this.currIresNodeData.resType == "zb" || this.currIresNodeData.resType == "zbview";
    }else{
      return this.currZbNodeData == null || this.currZbNodeData.type != "zb";
    }
    },
    removeAllDisable:function (){
      if (this.tableData.length === 0){
        return true
      }else {
        return false
      }
    }
  },
  watch:{
    tableData:{
      handler(newValue,oldValue){
        this.$emit('getSelectedNumber',newValue)
        if (this.tableData.length === 0){
          this.currentSelectDeptCode = '';
        }
      }
    },
    selectedResArr:{
        handler(n,o){
            if(n != o){
                this.tableData = this.selectedResArr
            }
        }
    },
    currDeptCode:{
         handler(n,o){
            if(n != o){
                this.currentSelectDeptCode = this.currDeptCode
            }
        }
    },
    searchText:{
      handler(){
        this.searchResult = []
      }
    },
  },
  data(){
    return{
      //控制显示 资源树形
      isShowIres:true,
      //搜索内容
      searchText:"",
      //控制显示 左侧搜索结果表格
      searchResultVisible:false,
      //指标树上 当前选择的 节点信息
      currZbNodeData:null,
      //资源树上 当前选择的 节点信息
      currIresNodeData:null,
      //搜索显示内容
      searchResult:[],
      //搜索内容表格的loading
      loading:false,
      //某一具体指标资源 内部的所有指标信息
      zbGroupTreeData:[],
      //右侧表格数据
      tableData:this.selectedResArr,
      // 资源树形数据
      iresTreeData:[],
      // 右侧表格当前项
      currentRow:null,
      //当前选中部门代码
      currentSelectDeptCode:'',
      //处理资源部门代码与选中部门代码是否一致
      deptCodeIsNotConsistent:false,
      //控制删除按钮显示
      removeDisable:true,
      //控制直接下级按钮显示
      selectSubDisable:true,
      //控制所有下级按钮显示
      selectAllSubDisable:true,
      //资源树形，默认展开节点
      defExpendKeys:[]
    }
  },

  methods:{
    //当前是指标树，准备返回信息资源树
    backToIres:function() {
      this.isShowIres = true;
      this.searchText=''
      this.searchResultVisible = false
      this.currZbNodeData = null
      this.$refs.searchInput.focus()
      let that =this;
      this.$nextTick(function () {
        //点击返回后，自动定位到当前选中的资源节点
        let dom = document.querySelector("#treeitem" + that.currIresNodeData.id);
        if (dom) {
          dom.parentElement.parentElement.scrollIntoView({
            //滚动到指定节点
            block: 'nearest', //值有start,center,end，nearest，当前显示在视图区域中间
            behavior: 'smooth' //值有auto、instant,smooth，缓动动画（当前是慢速的）
          })
        }
      })
    },
    //模糊搜索节点
    fuzzyMatch: Debounce(async function(val,callback) {
      if(val == '' || val.trim().length == 0){
        return false;
      }
      //显示搜索结果表格
      this.searchResultVisible = true
      //根据当前树形类型进行不同的搜索策略   资源 & 指标
      if(this.isShowIres) {
        this.loading = true
        let result = await inforesApi.searchInfoRes(val)
        for (let i=0;i< result.length;i++){
          let item = result[i]
          // item.pathTitle = result[i].path
          this.searchResult.push(item)
        }
        this.loading = false
      } else {
        let params = { resGuid: this.currIresNodeData.id, text: encodeURI(val),zbtype: this.currIresNodeData.resType,guid: this.zbGroupTreeData[0].id,filter:true,isApply:this.isApply};
        this.loading = true
        inforesApi.fuzzyMatchZBData(params).then(res => {
          this.searchResult = res;
          this.loading =false;
        }).catch(eror =>{
          this.loading =false;
        });
      }
    },500),
    // 清理左侧搜索关键字
    cleanLeftKeyWord: function() {
      this.searchText = "";
    },
    //【单击】搜索结果展示表格
    setSelected: function(values,index){
      this.removeDisable = true
      let val = values.row;
      //资源树形显示
      if(this.isShowIres){
        // 在显示资源树形时，进行搜索，之后点击搜索结果中的内容，
        //信息资源：设置选中的当前节点   指标资源：展示指标树形并选中该节点
        if(val.resType == "zb" || val.resType == "zbview"){
          this.searchResultVisible=false;
          this.searchText = ''
        }
        this.expandByPath(val.id, val.pDirectoryGuid, 0);
      }else{
        //searchResult 是搜索的结果数组，
        //是打开了某一个具体指标资源的指标树形的前提下，进行的搜索。 该指标树形可以存在多个分组，类似于多个树形,  点击后不会显示树形
        let resultZb = [];
        for (let index = 0; index < this.searchResult.length; index++){
          const element = this.searchResult[index];
          resultZb.push(element.parent);
        }
        this.expandByPathZb(val.id,resultZb,0)
      }
    },
    // 根据路径逐级展开（进入具体的指标资源）
    expandByPath: function(id, paths, index){
      let tree = this.$refs.iresTree;
      let  pNode = tree.getNode(paths[index]);
      if (pNode == null) {
        return;
      }
      let that =this
      pNode.expand(() => {
        let targetNode = tree.getNode(id);
        if (targetNode == null) {
          this.expandByPath(id, paths, ++index);
        }else{
          tree.setCurrentKey(id);

          setTimeout(function(){
            let dom = document.querySelector("#treeitem"+id);
            if(dom){
              dom.parentElement.parentElement.scrollIntoView({
                //滚动到指定节点
                block: 'nearest', //值有start,center,end，nearest，当前显示在视图区域中间
                behavior: 'smooth' //值有auto、instant,smooth，缓动动画（当前是慢速的）
              })
            }
            that.iresTreeNodeClick(targetNode.data)
          },300)
        }
      })
    },
    //点击资源树形节点
    iresTreeNodeClick:function(data) {
      this.removeDisable = true
      //当点击左侧树形节点时进行判断   如果不是叶子节点  则可以进行多选类型操作
      if (data.type !== '04'){
        if (data.type === '01' || data.type === '02') {
          this.selectAllSubDisable = false;
        }
        if (data.type === '01') {
          this.selectSubDisable = false
        }
      } else {
        this.selectAllSubDisable = true
        this.selectSubDisable = true
      }
      this.currIresNodeData = data;
      if (!this.judgeDeptCode(data.isLeaf)) {
        if (this.currIresNodeData.resType == "zb" || this.currIresNodeData.resType == "zbview") {
          this.searchText = ''
          this.searchResultVisible = false
          this.$refs.searchInput.focus()
          this.isShowIres = false;
          this.initZbGroupTree();
        } else {
          this.searchResultVisible = true
        }
     }
    },
    //初始化指标树形   此树形显示指标资源内部具体的指标信息
    initZbGroupTree:function(){
      let datas = {resGuid:this.currIresNodeData.id,filter:true,isApply:this.isApply};
      inforesApi.getZbGroupTreeData(datas).then(res => {
        this.zbGroupTreeData = res.data;
      }).then(() =>{
        this.selectFirstZbNode(null);
      });
    },
    //选中第一个指标节点
    selectFirstZbNode:function(pGroup){
      if(this.zbGroupTreeData.length <= 0){
        this.currZbNodeData = null
        return ;
      }
      let zbGroupTreeObj = this.$refs.zbGroupTree ;
      if(pGroup == null){
        // 获取指标数组中的第一个
        pGroup = zbGroupTreeObj.getNode(this.zbGroupTreeData[0]);
      }
      if(pGroup == null){
        // 如果该指标数组为空则  设置当前选中指标节点  为空
        this.currZbNodeData = null
        return ;
      }

      //指标数组存在
      if(pGroup.loaded){
        let children = pGroup.childNodes;
        if(children.length > 0 ){
          let child = children[0];
          if(child.data.type == "zb"){
            this.zbGroupTreeNodeClick(child.data);
            zbGroupTreeObj.setCurrentKey(child.data.id);
          }else{
            this.selectFirstZbNode(child);
          }
        }
      }else{
        pGroup.expand(()=>{
          let children = pGroup.childNodes;
          if(children.length > 0 ){
            let child = children[0];
            if(child.data.type == "zb"){
              this.zbGroupTreeNodeClick(child.data);
              zbGroupTreeObj.setCurrentKey(child.data.id);
            }else{
              this.selectFirstZbNode(child);
            }
          }
        });
      }
    },
    //勾选当前指标节点
    zbGroupTreeNodeClick:function(data){
      this.removeDisable = true
      //当点击 “指标分组”节点 时，可以可以进行多选操作
      if (data.type !== '04' && data.type === 'group'){
        this.selectAllSubDisable = false
        this.selectSubDisable = false
      }else {
        this.selectAllSubDisable = true
        this.selectSubDisable = true
      }
      this.currZbNodeData = data;
    },
    //根据指标路径多次逐级展开   找父节点后找自身 不断循环直到找到
    expandByPathZb: function(id, paths, index) {
      let tree = this.$refs.zbGroupTree;
      let pNode = tree.getNode(paths[index]);
      if (pNode == null) {
        return;
      }
      let that =this
      pNode.expand(() => {
        let targetZbNode = tree.getNode(id);
        if (targetZbNode == null) {
          this.expandByPathZb(id, paths, ++index);
        }else{
          tree.setCurrentKey(id);

          setTimeout(function(){
            let dom = document.querySelector("#zbtreeitem"+id);
            if(dom){
              dom.parentElement.parentElement.scrollIntoView({
                //滚动到指定节点
                block: 'nearest', //值有start,center,end，nearest，当前显示在视图区域中间
                behavior: 'smooth' //值有auto、instant,smooth，缓动动画（当前是慢速的）
              })
              that.zbGroupTreeNodeClick(targetZbNode.data)
            }
          },300)
        }
      })
    },
    //【双击】搜索结果展示表格，将目标项移至右侧表格
    doubleRowCheck: function(values,index) {
      this.removeDisable = true
      let val = values.row;
      if (!this.judgeDeptCode(val.isLeaf)){
        //显示资源树形的情况，做搜索后产生的搜索结果表格
        if(this.isShowIres){
          this.currIresNodeData = val;
          if(this.currIresNodeData.resType != "zb" && this.currIresNodeData.resType != "zbview"){
            this.doSelect();
          }else{
            this.searchResultVisible=false;
            this.searchText = ''
          }
          folderApi.getFolderNodePath({ "fGuid" : val.parent,"isFix":"true" }).then((result) => {
            this.expandByPath(val.id, result, 0);
          })

          //显示指标树形的情况下，做搜索后产生的搜索结果表格
        }else{
          this.currZbNodeData = val;
          this.doSelect();
          let resultZb = [];
          for (let index = 0; index < this.searchResult.length; index++) {
            const element = this.searchResult[index];
            resultZb.push(element.parent);
          }
          this.expandByPathZb(val.id,resultZb,0)
          //查询val:指标路径
        }
      }
    },
    //进行选择
    doSelect:function(){
      if(this.isShowIres){
        this.dblNodeClick();
      }else{
        this.dblZbNodeClick();
      }
    },
    //选择资源
    dblNodeClick:function(){
      this.removeDisable = true
      let data = this.currIresNodeData;
      if (!this.judgeDeptCode(data.isLeaf)){
        if(data.isLeaf){
          if(!this.findInTableData(data) ){
            this.$set(data,"category",this.currIresNodeData.category);
            this.tableData.push(data);
            this.currentSelectDeptCode = data.deptCode
          }
        }
      }
    },
    //选择指标
    dblZbNodeClick:function(){
      this.removeDisable = true
      let data = this.currZbNodeData;
      if (!this.judgeDeptCode(data.isLeaf)){
        if(data.type ==="zb"){
          if(!this.findInTableData(data) ){
            this.$set(data,"category",this.currIresNodeData.category);
            this.$set(data,"zbResGuid",this.currIresNodeData.id);
            this.$set(data,"path",data.path);
            this.tableData.push(data);
            this.currentSelectDeptCode = this.currIresNodeData.deptCode
          }
        }
      }
    },
    //检测当前 准选择数据 是否 在右侧表格中已经进行选择
    findInTableData:function(nodeData){
      if(nodeData.type === 'zb'){
        for(let i = 0; i < this.tableData.length;i++){
          if(this.tableData[i].code === nodeData.code){
            return true;
          }
        }
      }else{
        for(let i = 0; i < this.tableData.length;i++){
          if(this.tableData[i].id && this.tableData[i].id === nodeData.id){
            return true;
          }
        }
      }
      return false;
    },
    //加载资源树形
    loadIresTreeNode:function(parameter, callback){
      let node = parameter;
      let datas = {"category": this.category};
      if (node.level > 0) {
        datas.pId = node.data.id;
        datas.pType = node.data.type;
      }
      inforesApi.queryInfoResAuthFolderTree(datas).then((result)=>{
        if(datas.pId === undefined){
            this.defExpendKeys = [result.data[0]]
        }
        callback(result.data);
      })
    },
    //加载指标树形
    loadZbGroupTreeNode:function(node,resolve){
      if(node.level === 0){
        return resolve([]);
      }
      let pGuid =  node.data.id ;
      let datas = {resGuid:this.currIresNodeData.id,guid:pGuid,filter:true,isApply:this.isApply};
      inforesApi.getZbGroupTreeData(datas).then(res => {
        resolve(res.data);
      });
    },
    // 删除右侧表格的数据项
    remove:function(){
      this.removeDisable = true
      let firstPoint = this.tableData.findIndex((item) => {
        if (this.currentRow.id != undefined) {
          return item.id === this.currentRow.id
        } else {
          return item.guid === this.currentRow.guid
        }
      });
      this.tableData.splice(firstPoint, 1);
      if (this.tableData.length === 0) {
        this.currentSelectDeptCode = ''
      }
    },
    // 【单击】右侧表格  选择当前行
    rowClick:function({row}){
      this.removeDisable = false
      this.currentRow = row;
    },
    // 【双击】右侧表格 删除当前行
    rowDblClick:function({row}){
      this.removeDisable = true
      let firstPoint = this.tableData.findIndex((item) => {
        if (row.id != undefined) {
          return item.id === row.id
        } else {
          return item.guid ===row.guid
        }
      });
      this.tableData.splice(firstPoint, 1);
    },
    // 渲染树形获取图标
    getIcon:function(nodeData){
      let fontIcon = "bi-ui-icon-folder";
      if(nodeData.type == "zb"){
        fontIcon = "bi-ui-icon-zb";
      }
      return fontIcon;
    },
    //判断当前节点的部门代码 是否与 已选择部门代码相同，
    judgeDeptCode(isLeaf){
      this.deptCodeIsNotConsistent = isLeaf && this.currentSelectDeptCode !== '' && this.currIresNodeData.deptCode !== this.currentSelectDeptCode
      if (this.deptCodeIsNotConsistent) {
        // this.$BI.Dialog.alert("一个申请内信息资源所属部门必须相同")
      }
      return this.deptCodeIsNotConsistent
    },
    // 选择直接下级
    selectSub: async function (){
      if (this.currentSelectDeptCode === '') {
        this.$BI.Dialog.alert("请先选择一个资源，确定申请资源的所属部门。");
        return;
      }
      let data = {
        //直接下级
        selectType:0
      };
      if (this.currZbNodeData !== null){
        data.resGuid = this.currIresNodeData.id
        data.resType = this.currIresNodeData.resType
        data.groupGuid = this.currZbNodeData.id
        data.isAllChildren = false
        data.filter = true
        data.isApply = this.isApply
        data.currentSelectDeptCode = this.currentSelectDeptCode
        let res = await inforesApi.getSubZbItems(data)
        for (let i = 0; i < res.data.length; i++) {
          if (!this.findInTableData(res.data[i])) {
            this.$set(res.data[i],"zbResGuid",this.currIresNodeData.id);
            this.tableData.push(res.data[i])
          }
        }
      }else {
        data.id = this.currIresNodeData.id
        data.type = this.currIresNodeData.type
        data.currentSelectDeptCode = this.currentSelectDeptCode
        let res = await inforesApi.getSubData(data)
        for (let i = 0; i < res.length; i++) {
          if (!this.findInTableData(res[i])){

            this.tableData.push(res[i])
          }
        }
      }
    },
    // 选择所有下级
    selectAllSub: async function (){
      if (this.currentSelectDeptCode === '') {
        this.$BI.Dialog.alert("请先选择一个资源，确定申请资源的所属部门。");
        return;
      }
      let data = {
        //所有下级
        selectType:1
      };
      if (this.currZbNodeData !== null){
        data.resGuid = this.currIresNodeData.id
        data.resType = this.currIresNodeData.resType
        data.groupGuid = this.currZbNodeData.id
        data.isAllChildren = true
        data.filter = true
        data.isApply = this.isApply
        data.currentSelectDeptCode = this.currentSelectDeptCode
        let res = await inforesApi.getSubZbItems(data)
        for (let i = 0; i < res.data.length; i++) {
          if ( !this.findInTableData(res.data[i])){
            this.$set(res.data[i],"zbResGuid",this.currIresNodeData.id);
            this.tableData.push(res.data[i])
          }
        }
      }else {
        data.id = this.currIresNodeData.id
        data.type = this.currIresNodeData.type
        data.currentSelectDeptCode = this.currentSelectDeptCode
        let res = await inforesApi.getSubData(data)
        for (let i = 0; i < res.length; i++) {
          if (!this.findInTableData(res[i])){
            this.tableData.push(res[i])
          }
        }
      }
    },
    // 移除所有
    removeAll(){
      this.tableData = []
      // 移除右侧表格中的所有信息后，“单一移除”按钮失效
      this.removeDisable = true
    },
    // 树形动态样式
    resTreeDynamicStyle(node,data){
      if (node.data.type === '04' && this.currentSelectDeptCode !== '' && data.deptCode !== this.currentSelectDeptCode){
        return 'disableStyle'
      }
      return ''
    },
    // 表格动态样式
    resTableDynamicStyle({row}){
      if (row.type === '04' && this.currentSelectDeptCode !== '' && row.deptCode !== this.currentSelectDeptCode) {
        return "disableStyle"
      }
    }
  }
}
</script>

<style scoped>
.selectResourceButton{
  font-family: Microsoft YaHei,SimSun;
  margin-top: -6px;
  margin-left: 0px;
  color: black;
  /*border: 1px red solid;*/
  height: 21px;
  width: 70px;
  display: inline-block !important;
}
.bi-vxe-table .bi-vxe-table-dialog .vxe-table .tid_1 .border--full .show--head .has--height .t--animat .row--highlight .is--empty{
  height: 100%;
}
.topInput{
  height: 32px;
}
.topInput /deep/ .el-input__inner{
  height: 100% !important;
}
.topInput /deep/ .el-icon-search {
  margin-top: 9px;
  margin-left: 5px;
}
.disableStyle{
  color: #ccc !important;
  cursor: not-allowed;
}

.span_btn:hover{
    color: rgb(25, 181, 158);
}
.span_btn{
    color: #337ab7;
    cursor: pointer;
}
</style>
<style>
#search-container .vxe-body--row .disableStyle{
  color: #ccc !important;
}
</style>
